<template>
  <div class="cnt">
    <div class="tit">
      搜索
      <span>”{{ route.query.animalName }}“</span>
      的结果
    </div>
    <div class="detils">
      <div class="box" v-for="(item, index) in animals" :key="index">
        <img
          :src="`http://i79768a535.zicp.fun:23570/common/download?name=${item.animalImage}`"
          @click="() => toAnimalDetails(item.animalNumbers)"
        />

        <div class="msg">
          <span class="items">昵称:&ensp;&ensp;{{ item.animalName }}</span>
          <span class="items">品种:&ensp;&ensp;{{ item.breed }}</span>
          <span class="years">年龄:&ensp;&ensp;{{ item.animalAge }}年</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import { download, getAllAnimals } from "@/service/api.js";
import { message } from "ant-design-vue";
const router = useRouter();
const route = useRoute();
const animals = ref([]);
const animalName = ref(route.query.animalName);

// 获取可用的url
const load = async (name) => {
  if (name) {
    await download({ name });
  }
};
// 查询名字
const getAnimalsByName = async () => {
  const res = await getAllAnimals({
    animalName: animalName.value,
    pageNumber: 1,
    pageSize: 10,
  });
  if (res.code === 1) {
    animals.value = res.data.records;
    animals.value.forEach((item, index) => {
      load(item.animalImage);
      console.log(res);
    });
  } else message.error("查询出错");
};
getAnimalsByName();
const toAnimalDetails = (Num) => {
  router.push({ name: "animalDetails", query: { animalNumbers: Num } });
};
</script>
<style scoped>
.cnt {
  display: flex;
  flex-flow: column nowrap;
  width: 1000px;
  .tit {
    width: 100%;
    margin: 16px 0 16px 0;
    font-size: 18px;
    color: #423834;
    span {
      color: #f58220;
    }
  }
  .detils {
    display: flex;
    flex-flow: row wrap;
    width: 1000px;
    .box {
      margin-left: 8px;
      img {
        width: 185px;
        height: 130px;
        display: block;
      }
      .msg {
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
        color: #423834;
        padding-top: 3px;
        width: 185px;
        padding: 2px;
        .items {
          color: #423834;
          padding-top: 3px;
        }
        .years {
          font-size: 14px;
        }
      }
    }
  }
}
</style>
